<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-10 14:12:30
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-10 15:30:00
 * @FilePath: \nien-vue3-admin\src\views\finance\invoiceManangement\components\DetailDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog v-model="visible" title="开票详情" width="960px">
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="客户名称" prop="customerName"></el-table-column>
      <el-table-column label="对账编号" prop="serialNo"></el-table-column>
      <el-table-column label="发票金额" prop="totalAmount"></el-table-column>
      <el-table-column label="发票号码" prop="invoiceNo"></el-table-column>
      <el-table-column label="发票生成时间" prop="invoiceDate"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { billingDetails } from '@/api/finance/billing'

const visible = ref<boolean>(false)
const loading = ref<boolean>(false)

const tableData = reactive<any[]>([])

const getList = (serialNo) => {
  loading.value = true
  tableData.length = 0
  billingDetails({ serialNo }).then(({ code, data }) => {
    if (code === 200 && data) {
      tableData[0] = data
    }
  }).finally(() => {
    loading.value = false
  })
}

const open = (serialNo) => {
  getList(serialNo)
  visible.value = true
}

defineExpose({
  open,
})
</script>